<template>
    <!-- 标签 -->
    <div class="container">
        <div class="dashboard-container">
            <div class="app-container">
                <el-card shadow="never">
                    <!-- 上半部分 -->
                     <el-form :inline="true" class="demo-form-inline" :data="formData" ref="requestParameters">
                        <div class="filter-container">
                            <el-row type="flex" justify="end">
                                <el-col>
                                    <el-form-item label="目录名称">
                                        <el-input size="small" @keyup.enter="handleFilter" style="width: 200px;"
                                            class="filter-item" v-model="formData.keyword"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态" style="margin-left: 40px;">
                                        <el-select size="small" v-model="formData.state" placeholder="请选择">
                                            <el-option label="启用" value="1"></el-option>
                                            <el-option label="禁用" value="0"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" class="filter-item" @click="resetFormed"
                                            style="margin-left: 15px;">清空</el-button>
                                        <el-button size="small" class="filter-item" type="primary"
                                            @click="handleFilter">搜索</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2">
                                    <el-form-item>
                                        <el-button class="filter-item fr" size="small" style="margin-left: 10px" type="success"
                                    icon="el-icon-edit" @click="articlesDept">新增学科</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                    <!-- 数量提示条 -->

                    <el-alert type="info" show-icon class="alert" :title="alertText">
                    </el-alert>
                    <!-- 下半部分 -->
                    <!-- 数据 -->
                    <div class="information">
                        <el-table highlight-current-row style="width: 100%" v-loading="listLoading" :data="getArticles">
                            <el-table-column label="序号" type="index"></el-table-column>
                            <el-table-column label="文章标题" width="150" prop="title">
                                <template #default="{ row }">
                                    <!-- {{row}} -->
                                    {{ row.title }}
                                    <a href="#" class="el-icon-film" style="color:blue" v-if="row.videoURL ? true : false"
                                        @click="play(row.videoURL)"></a>
                                </template>
                            </el-table-column>
                            <el-table-column label="阅读数" prop="visits"> </el-table-column>
                            <el-table-column label="录入人" prop="username">
                            </el-table-column>
                            <el-table-column label="录入时间" width="200" prop="createTime">
                            </el-table-column>
                            <el-table-column fixed="right" label="状态" width="260" prop="state" :formatter="setState">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="260">
                                <template v-slot="{ row }">
                                    <el-button type="text" @click="preView(row.id)">预览</el-button>
                                    <el-button type="text" size="medium"
                                        @click="checkStatus(row.id, row.state)">{{ row.state === 1 ? '禁用' : '启用' }}</el-button>
                                    <el-button type="text" size="medium" :disabled="row.state === 1 ? true : false"
                                        @click="update(row)">修改</el-button>
                                    <el-button type="text" @click="delBtn(row)">删除</el-button>
                                </template>
                            </el-table-column>
                            <!-- <div class="pagination">
                <PageTool
                  :paginationPage="requestParameters.page"
                  :paginationPagesize="requestParameters.pagesize"
                  :total="total"
                  @pageChange="handleCurrentChange"
                  @pageSizeChange="handleSizeChange"
                ></PageTool>
              </div> -->
                        </el-table>
                        <el-row type="flex" justify="end" align="middle" style="height: 60px">
                        </el-row>
                    </div>
                    <div class="pagination">
                        <el-row type="flex" justify="end" align="middle" style="height: 60px">
                            <!-- 分页器 -->
                            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="requestParameters.page" :page-sizes="[5, 10, 20, 50]"
                                :page-size="requestParameters.pagesize" layout=" prev, pager, next,sizes, jumper"
                                :total="total" />
                        </el-row>
                    </div>
                </el-card>
                <articlesAdd :showDialog.sync="showDialog" @updateFrom="list" :node="node" ref="update"/>
                <articlesPreview :DialogIsShow.sync="DialogIsShow" :ArtData="ArtData"></articlesPreview>
                <div class="video" v-if="videoIsShow">
                    <div class="close">
                        <span class="el-icon-close" @click="close"></span>
                    </div>
                    <div class="box">
                        <video :src="videoURL"></video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { list, remove, changeState, detail } from '@/api/hmmm/articles.js'
import { simpleUsers } from '@/api/base/users.js'
import PageTool from '../../module-dashboard/components/pageTool.vue'
import articlesAdd from '../components/articles-add.vue'
import articlesPreview from '../components/articles-preview.vue'
import EmploeeEnum from '@/api/base/baseApi.js'
export default {
  components: {
    articlesAdd,
    PageTool,
    articlesPreview
  },
  data () {
    return {
      status: EmploeeEnum.status,
      getArticles: [],
      videoURL: '',
      total: 0,
      listLoading: true,
      alertText: '',
      DialogIsShow: false,
      videoIsShow: false,
      showDialog: false,
      requestParameters: {
        page: 1,
        pagesize: 10,
        title: ''
      },
      node: {},
      formData: {
        keyword: '',
        state: ''
      },
      ArtData: {}
    }
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      this.listLoading = true
      const res = await list(this.requestParameters)
      const { counts, items } = res.data
      console.log(res.data)
      this.getArticles = items
      this.total = counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 枚举状态
    setState (row) {
      const obj = this.status.find(item => item.id === String(row.state))
      // console.log(obj)
      return obj?.value ? obj?.value : '禁用'
    },
    // 点击新增学科显示弹窗
    articlesDept () {
      this.showDialog = true
    },
    // 改变状态
    async checkStatus (id, state) {
      try {
        if (state === 0) {
          state = 1
        } else {
          state = 0
        }
        await changeState({ id, state })
        await this.list()
        this.$message.success('更新成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 清除
    resetFormed () {
      this.formData = {
        page: 1,
        pagesize: 10,
        title: '',
        state: ''
      }
      // this.listLoading = true
      // this.requestParameters.page = 1
      // this.list(this.requestParameters)
      // this.requestParameters.title = ''
      // this.requestParameters.state = ''
      // this.listLoading = false
    },
    // 搜索信息
    async handleFilter () {
      this.listLoading = true
      this.requestParameters.keyword = this.formData.keyword
      this.requestParameters.state = this.formData.state
      const res = await this.list(this.requestParameters)
      console.log(res)
      // this.formData.directoryName = ''
      this.listLoading = false
    },
    // 预览
    async preView (id) {
      this.DialogIsShow = true
      const { data } = await detail({ id })
      const { data: userList } = await simpleUsers()
      console.log(userList)
      // 匹配录入人
      const { username } = userList.find(item => { return item.id === data.creatorID })

      this.ArtData = data
      this.ArtData.username = username
      console.log(this.ArtData)
    },
    // 打开视频
    play (videoURL) {
      this.videoIsShow = true
      this.videoURL = videoURL
    },
    // 关闭视频
    close () {
      this.videoIsShow = false
    },
    // 删除学科
    async delBtn (id) {
      try {
        // 提示消息
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用接口
        await remove(id)
        // 重置数据
        this.list()
        // 提示删除成功
        this.$message.success('删除成功!')
        console.log(1)
      } catch (err) {
        console.log(err)
      }
    },
    // 修改学科
    async update (node) {
      this.showDialog = true
      this.node = node
      await this.$refs.update.detail(node)
    },
    // 改变时会触发--当前页
    handleCurrentChange () {
      this.list()
    },
    // pageSize 改变时会触发--每页条数
    handleSizeChange (val) {
      this.params.pagesize = val
      this.list()
    },
    // 重置
    resetForm () {
      this.$refs.requestParameters.resetFields()
    }
  }
}
</script>

<style scoped>
.pagination {
    margin-top: 10px;
}

.filter-container {
    padding-bottom: 0px !important;
}

.information {
    margin-top: 10px;
}

.alert {
    margin-top: 10px;
}

.video {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    overflow: hidden;
    z-index: 9999;

}

.video>.close {
    position: relative;
    top: 30px;
    left: 50%;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    color: #fff;
}

.close>span {
    position: absolute;
    font-size: 25px;
    top: 25%;
    left: 25%;
    text-align: center;
}
</style>
